
<div class="page page-mail">
    <div class="row">

        <div class="col-sm-3 mail-categories">
            <div class="category-heading">
                <a href="#/mail/compose" class="btn btn-block btn-lg btn-primary">Compose</a>
            </div>
            <ul class="list-group">
                <li class="list-group-item active"><a href="javascript:;">
                    <i class="ti-folder"></i>Inbox
                    <span class="badge badge-info pull-right">6</span>
                </a></li>
                <li class="list-group-item"><a href="javascript:;">
                    <i class="ti-email"></i>Send mail
                </a></li>
                <li class="list-group-item"><a href="javascript:;">
                    <i class="ti-star"></i>Starred
                    <span class="badge badge-danger pull-right">3</span>
                </a></li>
                <li class="list-group-item"><a href="javascript:;">
                    <i class="ti-comment"></i>Chat
                    <span class="badge badge-success pull-right">9</span>
                </a></li>
                <li class="list-group-item"><a href="javascript:;">
                    <i class="ti-pencil"></i>Draft
                    <span class="badge badge-warning pull-right">1</span>
                </a></li>
                <li class="list-group-item"><a href="javascript:;">
                    <i class="ti-trash"></i>Spam
                </a></li>
            </ul>

            <div class="category-heading">
                <h4>Label</h4>
            </div>
            <ul class="list-group">
                <li class="list-group-item"><a href="javascript:;">
                    Work <i class="ti-control-record color-danger pull-right"></i>
                </a></li>
                <li class="list-group-item"><a href="javascript:;">
                    Friends <i class="ti-control-record color-info pull-right"></i>
                </a></li>
                <li class="list-group-item"><a href="javascript:;">
                    Family <i class="ti-control-record color-primary pull-right"></i>
                </a></li>
                <li class="list-group-item"><a href="javascript:;">
                    Private <i class="ti-control-record color-warning pull-right"></i>
                </a></li>
                <li class="list-group-item"><a href="javascript:;">
                    Classmates <i class="ti-control-record color-success pull-right"></i>
                </a></li>
            </ul>
        </div>
        <div class="col-sm-9">
            <section class="panel panel-default mail-container">
                <div class="panel-heading">Inbox</div>
                <div class="mail-options">
                    <label class="ui-checkbox"><input name="checkbox1" type="checkbox" value="option1" ><span>Toggle All</span></label>
                </div>
                <table class="table table-hover table-responsive">
                    <tr class="mail-unread">
                        <td><label class="ui-checkbox"><input name="checkbox1" type="checkbox" value="option1" ><span></span></label></td>
                        <td>Jane Swift <i class="ti-control-record color-info"></i></td>
                        <td>Nice to meet you</td>
                        <td><i class="ti-paperclip"></i></td>
                        <td>3/11/14 2:30 PM</td>
                        <td><i class="ti-star"></i></td>
                    </tr>

                    <tr class="mail-unread">
                        <td><label class="ui-checkbox"><input name="checkbox1" type="checkbox" value="option1" ><span></span></label></td>
                        <td>Gmail</td>
                        <td>Please confirm your registeration</td>
                        <td> </td>
                        <td>2/19/14 2:00 PM</td>
                        <td><i class="ti-star"></i></td>
                    </tr>
                    <tr>
                        <td><label class="ui-checkbox"><input name="checkbox1" type="checkbox" value="option1" ><span></span></label></td>
                        <td>John Smith <i class="ti-control-record color-danger"></i></td>
                        <td>Lorem ipsum dolor sit amet</td>
                        <td> </td>
                        <td>2/15/14 5:00 AM</td>
                        <td><i class="ti-star active"></i></td>
                    </tr>
                    <tr class="mail-hightlight">
                        <td><label class="ui-checkbox"><input name="checkbox1" type="checkbox" value="option1" checked><span></span></label></td>
                        <td>no-reply</td>
                        <td>Consectetur adipisicing elit.</td>
                        <td> </td>
                        <td>2/11/14 2:00 PM</td>
                        <td><i class="ti-star active"></i></td>
                    </tr>
                    <tr>
                        <td><label class="ui-checkbox"><input name="checkbox1" type="checkbox" value="option1" ><span></span></label></td>
                        <td>no-reply</td>
                        <td>Ea totam libero dignissimos dicta eos</td>
                        <td> </td>
                        <td>2/11/14 2:00 PM</td>
                        <td><i class="ti-star"></i></td>
                    </tr>
                    <tr>
                        <td><label class="ui-checkbox"><input name="checkbox1" type="checkbox" value="option1" ><span></span></label></td>
                        <td>Alex Swift <i class="ti-control-record color-success"></i></td>
                        <td>Dolor ut similique</td>
                        <td><i class="ti-paperclip"></i></td>
                        <td>2/11/14 2:00 PM</td>
                        <td><i class="ti-star"></i></td>
                    </tr>
                    <tr>
                        <td><label class="ui-checkbox"><input name="checkbox1" type="checkbox" value="option1" ><span></span></label></td>
                        <td>Emma Bebier <i class="ti-control-record color-success"></i></td>
                        <td>Rerum dolore commodi nobis quaerat</td>
                        <td> </td>
                        <td>2/11/14 2:00 PM</td>
                        <td><i class="ti-star active"></i></td>
                    </tr>
                    <tr>
                        <td><label class="ui-checkbox"><input name="checkbox1" type="checkbox" value="option1" ><span></span></label></td>
                        <td>Service</td>
                        <td>abore id dignissimos non minus</td>
                        <td> </td>
                        <td>2/11/14 2:00 PM</td>
                        <td><i class="ti-star"></i></td>
                    </tr>
                    <tr>
                        <td><label class="ui-checkbox"><input name="checkbox1" type="checkbox" value="option1" ><span></span></label></td>
                        <td>Service</td>
                        <td>Fugit ducimus quidem</td>
                        <td> </td>
                        <td>2/11/14 2:00 PM</td>
                        <td><i class="ti-star"></i></td>
                    </tr>
                    <tr>
                        <td><label class="ui-checkbox"><input name="checkbox1" type="checkbox" value="option1" ><span></span></label></td>
                        <td>Big ant</td>
                        <td>Laboriosam, minima totam</td>
                        <td><i class="ti-paperclip"></i></td>
                        <td>2/11/14 2:00 PM</td>
                        <td><i class="ti-star active"></i></td>
                    </tr>
                    <tr>
                        <td><label class="ui-checkbox"><input name="checkbox1" type="checkbox" value="option1" ><span></span></label></td>
                        <td>Tyler Doe <i class="ti-control-record color-primary"></i></td>
                        <td>Laborum consequatur quae</td>
                        <td><i class="ti-paperclip"></i></td>
                        <td>2/11/14 2:00 PM</td>
                        <td><i class="ti-star active"></i></td>
                    </tr>
                    <tr>
                        <td><label class="ui-checkbox"><input name="checkbox1" type="checkbox" value="option1" ><span></span></label></td>
                        <td>Small Tomato</td>
                        <td>Nemo aliquid</td>
                        <td> </td>
                        <td>2/11/14 2:00 PM</td>
                        <td><i class="ti-star"></i></td>
                    </tr>
                    <tr>
                        <td><label class="ui-checkbox"><input name="checkbox1" type="checkbox" value="option1" ><span></span></label></td>
                        <td>Service</td>
                        <td>Laudantium rerum ab similique aliquam</td>
                        <td> </td>
                        <td>2/11/14 2:00 PM</td>
                        <td><i class="ti-star"></i></td>
                    </tr>
                    <tr>
                        <td><label class="ui-checkbox"><input name="checkbox1" type="checkbox" value="option1" ><span></span></label></td>
                        <td>Private <i class="ti-control-record color-warning"></i></td>
                        <td>Voluptatum reprehenderit</td>
                        <td><i class="ti-paperclip"></i></td>
                        <td>2/11/14 2:00 PM</td>
                        <td><i class="ti-star"></i></td>
                    </tr>
                    <tr>
                        <td><label class="ui-checkbox"><input name="checkbox1" type="checkbox" value="option1" ><span></span></label></td>
                        <td>Big ant</td>
                        <td>Deleniti veniam aperiam</td>
                        <td> </td>
                        <td>2/11/14 2:00 PM</td>
                        <td><i class="ti-star"></i></td>
                    </tr>
                    <tr>
                        <td><label class="ui-checkbox"><input name="checkbox1" type="checkbox" value="option1" ><span></span></label></td>
                        <td>Service</td>
                        <td>Facere ullam totam!</td>
                        <td> </td>
                        <td>2/11/14 2:00 PM</td>
                        <td><i class="ti-star"></i></td>
                    </tr>
                    <tr>
                        <td><label class="ui-checkbox"><input name="checkbox1" type="checkbox" value="option1" ><span></span></label></td>
                        <td>Private <i class="ti-control-record color-warning"></i></td>
                        <td>Fugit ducimus quidem</td>
                        <td> </td>
                        <td>2/11/14 2:00 PM</td>
                        <td><i class="ti-star active"></i></td>
                    </tr>
                    <tr>
                        <td><label class="ui-checkbox"><input name="checkbox1" type="checkbox" value="option1" ><span></span></label></td>
                        <td>Small Tomato</td>
                        <td>Laboriosam, minima totam</td>
                        <td><i class="ti-paperclip"></i></td>
                        <td>2/11/14 2:00 PM</td>
                        <td><i class="ti-star"></i></td>
                    </tr>
                    <tr>
                        <td><label class="ui-checkbox"><input name="checkbox1" type="checkbox" value="option1" ><span></span></label></td>
                        <td>Tyler Doe <i class="ti-control-record color-primary"></i></td>
                        <td>Aborum consequatur quae</td>
                        <td> </td>
                        <td>2/11/14 2:00 PM</td>
                        <td><i class="ti-star"></i></td>
                    </tr>

                </table>
            </section>
        </div>
    </div>
</div>